<template>
	<view class="cont">
		<view class="cont-body">
			<view class="search">
				<view class="search-item">
					<view class="search-icon">
						<uni-icons color="#999999" class="icon-search" type="search" size="18" />
					</view>
					<input type="text" value="" placeholder="搜索" />
				</view>
			</view>
			
			<!-- 管理员名单 -->
			<view class="order">
				<view class="order-list">
					<view v-for="(item,index) in subUser" :key="index" :class="['order-list-cell',{'admin':choiceIndex==index}]" @click="setManage(index, item.id, item.name)">
						<view class="order-choice">
							<image v-if="choiceIndex == index" src="/static/icon_choose_pre.png" mode="aspectFill"></image>
							<image v-else src="/static/icon_choose_nor.png" mode="aspectFill"></image>
						</view>
						<view class="order-icon">
							<text v-if="choiceIndex == index">{{item.name}}</text>
							<text v-else>未激活</text>
						</view>
						<view class="order-text">
							<text>{{item.name}}</text>
							<text class="uni-badge" v-if="choiceIndex == index">主管理员</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	
		<view class="cont-tabBar">
			<view class="cont-tabBar-row">
				<view class="cont-tabBar-item cont-tabBar-confirm">
					<button type="primary" @click="goComplete()">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default {
		components: {
			uniIcons
		},
		data: function () {
	        return {
				navTitle: "宁南县软云软件开发有限公司",
				choiceIndex: 0,
				company: 1,
				userid: 1,
				deptid: 1,
				managerid: 1,
				managername:"",
				subUser: []
	        }
	    },
		onLoad:function(){
			this.company = uni.getStorageSync("company");
			this.userid = uni.getStorageSync("userid");
			this.deptid = uni.getStorageSync("deptid");
			
			this.getSubDeptByDept();
		},
		methods:{
			getSubDeptByDept(){
				var that = this;
				
				uni.request({
					url:API.getSubDeptByDept+"?deptid="+this.deptid,
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						console.log("res==>", res);
						that.subUser = res.data.data.subUser;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			setManage(index, id, name){
				if(this.choiceIndex == index){
					this.choiceIndex = -1;
				}else{
					this.choiceIndex = index;
					this.managerid = id;
					this.managername = name;
				}
			},
			goComplete(){
				uni.setStorageSync("managerid",this.managerid);
				uni.setStorageSync("managername",this.managername);
				this.gotoBack();
			},
			gotoBack(){
				uni.navigateBack({
				    delta: 1
				});
			}
			
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	
	page{
		height: 100%;
		background-color: #FFFFFF;
	}
	
	.fixedHeader.cont-header{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.cont-header .status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background:#FFFFFF;
	}
	.cont-header .title{
		height:98upx;
		text-align: center;
		font-size:28upx;
		line-height:98upx;
		color: #333333;
		font-weight: bold;
		position:relative;
	}
	.cont-header .title .right{color:#b5b5b5;font-size:30upx;position:absolute;right:20upx;top:0;}
	
	
	.search{
		padding: 0 30upx 20upx;
		background-color: #FFFFFF;
	}
	.search-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #EAEDF2;
		border-radius: 60upx;
		height: 80upx;
		line-height: 80upx;
	}
	.search-icon{
		padding: 0 20upx;
		text-align: center;
		line-height: 80upx;
	}
	.search-item input{
		flex: 1;
		height: 80upx;
		line-height: 80upx;
	}
	.search-sub{
		color: #C5C5C5;
		margin-top: 30upx;
	}
	.department{
		padding: 20upx 0 40upx;
		background-color: #e5e5e5;
	}
	.department-list{
		padding-left: 20upx;
		background-color: #FFFFFF;
	}
	.department-list-cell,.order-list-cell{
		height: 100upx;
		line-height: 100upx;
		padding-right: 30upx;
		position: relative;
	}
	.department-list-cell:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #F9F9F9;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.department-list-cell text:first-child{
		color: #303030;
	}
	.department-list-cell text:nth-child(2){
		color: #C5C5C5;
		padding-left: 10upx;
	}
	.department-list-cell .icon-arrowright{
		float: right;
	}
	.invite{
		padding: 30upx 0;
		background-color: #e5e5e5;
	}
	.invite navigator{
		height: 80upx;
		line-height: 80upx;
		color: #303030;
		background-color: #FFFFFF;
	}
	.invite .icon-filled{
		margin: 0 50upx;
	}
	
	.order{
		padding-top: 20upx;
		background-color: #e5e5e5;
	}
	.order-list{
		background-color: #FFFFFF;
	}
	.order-list-cell{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0;
	}
	.order-list-cell:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #F9F9F9;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.order-list-cell:last-child:after{
		height: 0;
	}
	.order-list-cell .order-icon{
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
		margin-top: 20upx;
		border-radius: 50%;
		text-align: center;
		color: #83868C;
		background-color: #CDE1F9;
		margin: 20upx 30upx;
		font-size: 18upx;
	}
	.order-list-cell.admin .order-icon{
		background-color: #3197F6;
		color: #FFFFFF;
	}
	.order-list-cell .order-text{
		flex: 1;
		line-height: 100upx;
		color: #303030;
	}
	.order-text .uni-badge{
		font-size: 18upx;
		border-radius: 50upx;
		border: 1px solid #74ABCA;
		color: #74ABCA;
		background-color: #FFFFFF;
		margin-left: 5upx;
	}
	.order-text image{
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 30upx;
		margin: auto 0;
	}
	
	.order-choice{
		width: 40upx;
		height: 40upx;
		margin-top: 30upx;
		margin-left: 30upx;
	}
	.order-choice image{
		width: 100%;
		height: 100%;
	}
	
	.cont{
		padding-bottom: 120upx;
	}
	.cont-tabBar{
		width: 100vw;
		height: 120upx;
		box-sizing: border-box;
		padding: 20upx 30upx;
		border-top: 1px solid #EDEDED;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10000;
		background-color: #FFFFFF;
	}
	.cont-tabBar-row{
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.cont-tabBar-item{
		width: 240upx;
		height: 80upx;
	}
	.cont-tabBar-item button{
		height: 100%;
		border-radius: 13upx;
		background-color: #3596FD;
	}
	.cont-tabBar-item button:active{
		background-color: #3596FD;
		opacity: 0.6;
	}
	
	
</style>
